<script lang="ts">
import {defineComponent, computed} from "vue"

export default defineComponent({
  name: "DataCell",
  props: {
    active: {//是否默认显示状态
      type: Boolean,
      default: false
    },
    right: {//默认显示左侧区域
      type: Boolean,
      default: false
    },
    center: {//默认插槽是否居中
      type: Boolean,
      default: false
    },
    hoverLeft: {//鼠标移入是否靠左
      type: Boolean,
      default: false
    }
  },
  setup(props, {slots}) {
    let SlotList = Object.keys(slots)
    return {
      SlotList,
      ActiveClass: computed(() => props.active ? `cell-item-active` : ''),
      RightClass: computed(() => props.right ? `cell-item-show-right` : ''),
      CenterClass: computed(() => props.center ? `app-text-center` : ''),
      hoverLeftClass: computed(() => props.hoverLeft ? `hover-left` : ''),
    }
  }
})
</script>
<template>
  <div :class="`cell-item ${ActiveClass} ${RightClass} ${hoverLeftClass}`">
    <div :class="`cell-item-default ${CenterClass}`" v-if="SlotList.indexOf('default')>-1">
      <slot name="default"></slot>
    </div>
    <div class="cell-item-right" v-if="SlotList.indexOf('right')>-1">
      <slot name="right"></slot>
    </div>
  </div>
</template>
<style scoped lang="scss">
.cell-item {
  margin: 0;
  box-sizing: border-box;
  width: 100%;
  border-bottom: 1px solid var(--el-border-color-lighter);
  position: relative;
  height: 44px;
  line-height: 34px;
  padding: 5px 15px;
  cursor: pointer;
  font-size: var(--el-font-size-base);
  color: var(--el-text-color-regular);

  &.cell-item-show-right {
    .cell-item-right {
      display: inline-block;
    }
  }

  .cell-item-default {
    display: inline-block;
    width: calc(100% - 30px);
    position: absolute;
    overflow: hidden; /* 确保超出容器的文本被裁剪 */
    white-space: nowrap; /* 确保文本在一行内显示 */
    text-overflow: ellipsis; /* 使用省略号表示文本超出 */
  }

  .cell-item-right {
    display: none;
    width: calc(100% - 30px);
    position: absolute;
    text-align: right;
  }

  &.cell-item-active {
    color: var(--el-color-primary);
  }

  &:hover {
    .cell-item-right {
      display: inline-block;
    }

    color: var(--el-color-primary);

    &.hover-left {
      .cell-item-default {
        text-align: left;
      }
    }
  }
}
</style>